<template>
  <!--小人只在首页显示 start*-->
  <div id="spig" class="spig">
    <div id="message">正在加载中……</div>
    <div id="mumu" class="mumu"></div>
  </div>
  <!--小人end*-->
</template>

<script>
import $ from 'jquery'
export default {
  name: "Spig",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  created(){
    $("#spig").mousedown(function (e) {
        console.log(e)
        if (e.which == 3) {
            showMessage("秘密通道:<br /><a href=\"http://17sucai.com/\" title=\"订阅\">订阅</a>    <a href=\"http://17sucai.com\" title=\"首页\">首页</a>", 10000);
        }
    });
    $("#spig").bind("contextmenu", function (e) {
        return false;
    });

    //鼠标在消息上时
    $("#message").hover(function () {
        $("#message").fadeTo("100", 1);
    });
  },
  methods:{
    //显示消息函数 
    showMessage(a, b) {
        if (b == null) b = 10000;
        jQuery("#message").hide().stop();
        jQuery("#message").html(a);
        jQuery("#message").fadeIn();
        jQuery("#message").fadeTo("1", 1);
        jQuery("#message").fadeOut(b);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
/*样式设置*/
.spig
  display block
  width 150px
  height 190px
  position absolute
  top 200px
  left 160px
  z-index 9999
#message
  color #191919
  border 1px solid #c4c4c4
  background #ddd
  -moz-border-radius 5px
  -webkit-border-radius 5px
  border-radius 5px
  min-height 1em
  padding 5px
  top -30px
  position absolute
  text-align center
  width auto !important
  z-index: 10000
  -moz-box-shadow 0 0 15px #eeeeee
  -webkit-box-shadow 0 0 15px #eeeeee
  border-color #eeeeee
  box-shadow 0 0 15px #eeeeee
  outline none
.mumu
  width: 150px;
  height: 190px;
  cursor: move;
  background: url(../assets/spig.png) no-repeat;
</style>
